<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import { CesiumDefaultAccessToken } from "../js/CesiumDefaultAccessToken";

// 设置Cesium默认访问令牌以使用地图底图等数据服务,在 https://ion.cesium.com/ 申请免费令牌
Cesium.Ion.defaultAccessToken = CesiumDefaultAccessToken

let emit=defineEmits(['mapReady'])
onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false, // 隐藏动画控件
    baseLayerPicker: false, // 隐藏图层选择控件
    fullscreenButton: false, // 隐藏全屏按钮
    vrButton: false, // 隐藏VR按钮，默认false
    geocoder: false, // 隐藏地名查找控件
    homeButton: false, // 隐藏Home按钮
    infoBox: false, // 隐藏点击要素之后显示的信息窗口
    sceneModePicker: false, // 隐藏场景模式选择控件
    selectionIndicator: true, // 显示实体对象选择框，默认true
    timeline: false, // 隐藏时间线控件
    navigationHelpButton: false, // 隐藏帮助按钮
    requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
  });
  // 隐藏下方Cesium logo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  // 抗锯齿
  viewer.scene.postProcessStages.fxaa.enabled = true;

  emit('mapReady',viewer)

});
</script>
<style>
#cesiumContainer {
  width: 100%;
  height: 500px;
}
</style>
